<template>
    <div>
        <span>标题名称：</span>
        <a-input class="title-input" v-model:value="title" />
        <a-button class="title-btn" type="text" @click="onReLoad">
            <template #icon>
                <RedoOutlined />
            </template>
        </a-button>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RedoOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { RePortApi } from "@/api";

const props = defineProps({
    code: String,
});
const title = ref("");

onMounted(() => {
    if (props.code !== undefined) {
        RePortApi.getName(props.code)
            .then((res) => {
                if (res.status !== 200) {
                    message.error(res.data);
                    return;
                }
                title.value = res.data;
            })
            .catch((err) => {
                message.error(err.message);
            });
    }
});

const onReLoad = () => {
    RePortApi.saveName(props.code, title.value)
        .then((res) => {
            if (res !== "success") {
                message.error(res.data);
                return;
            }
            message.success("标题名称更新");
        })
        .catch((err) => {
            message.error(err.message);
        });
};
</script>

<style scoped>
.title-input {
    width: 50vh;
    margin-left: 2vh;
}

.title-btn {
    color: #07880e;
    margin-left: 2vh;
}
</style>
